<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>资源管理</el-breadcrumb-item>
      <el-breadcrumb-item>资源上传</el-breadcrumb-item>
    </el-breadcrumb>
    <div>
      <el-form
        :disabled="isDisabled"
        label-width="auto"
        style="margin-top: 1rem;background-color: #FFFFFF;padding: 2rem"
        label-position="top"
        @submit.native.prevent
      >
        <el-form-item label="年级:" prop="section">
          <el-select v-model="section" clearable placeholder="请选择年级">
            <el-option
              v-for="item in sectionOptions"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学科:" prop="subject">
          <el-select v-model="subject" clearable placeholder="请选择学科">
            <el-option
              v-for="item in sujectOptions"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资源类型:" prop="type">
          <el-select v-model="type" clearable placeholder="请选择资源类型">
            <el-option
              v-for="item in typeOptions"
              :key="item"
              :label="item"
              :value="item">
            </el-option>, 
          </el-select>
        </el-form-item>
        <el-form-item label="允许并发量:" prop="concurrencyLimit">
          <el-slider
            v-model="concurrencyLimit"
            :step="1"
            :max="10"
            :min="1"
            show-stops
            style="width: 30%">
          </el-slider>
        </el-form-item>
        <el-form-item label="文件" prop="file">
          <el-upload
            ref="upload"
            :file-list="fileList"
            :auto-upload="false"
            :on-change="handleChange"
            multiple
            action="">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
            <div slot="tip" class="el-upload__tip">可接受格式:doc/docx/ppt/pptx/mp4/png</div>
          </el-upload>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>

<script>
import { uploadResource } from '@/api/admin'

export default {
  data() {
    return {
      sectionOptions: ['小学', '初中', '高中'],
      sujectOptions: ['品德与生活（社会）', '政治', '语文', '数学', '科学', '物理', '化学', '生物', '历史与社会', '地理', '历史', '体育与健康', '艺术', '音乐', '美术', '信息技术', '通用技术', '外语', '英语', '日语', '俄语', '其他外国语', '综合实践活动', '劳动与技术'],
      typeOptions: ['课件', '教案', '微课', '试题', '文献资料','图片'],
      section: '',
      subject: '',
      type: '',
      concurrencyLimit: 0,
      fileList: [],
      isDisabled: false
    }
  },
  methods: {
    handleChange(file, fileList) {
      this.fileList = fileList
    },
    async submitUpload() {
      if (this.fileList.length === 0 || this.section === '' || this.subject === '' || this.type === '') {
        this.$message.warning('不能为空')
        return
      }
      this.isDisabled = true
      const pool = []
      let uploaded = 0
      for (let i = 0; i < this.fileList.length; i++) {
        // 构造请求参数
        const formParam = new FormData()
        formParam.append('type', this.type)
        formParam.append('subject', this.subject)
        formParam.append('section', this.section)
        formParam.set('file', this.fileList[i].raw)
        console.log(formParam)
        const promise = uploadResource(formParam)
        promise.then((res) => {
          // 从任务池中一移除
          pool.splice(pool.indexOf(promise), 1)
          if (res.data.code === 200) {
            this.$message.success(this.fileList[i].name)
          } else {
            this.$message.error(this.fileList[i].name)
          }
        }).finally(() => {
          uploaded++
          if (uploaded === this.fileList.length) {
            this.$refs.upload.uploadFiles = []
            this.isDisabled = false
          }
        })
        pool.push(promise)
        // 这里是重点，当满了就阻塞
        if (pool.length >= this.concurrencyLimit) {
          await Promise.race(pool)
        }
      }
    }
  }
}
</script>

<style scoped>
.info-container{
  margin-top: 3rem;
  display: flex;
  justify-content: space-evenly;
}
</style>
